import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    Image,
    TouchableOpacity,
    ScrollView,
    Dimensions,
}from 'react-native';
import CommonHead from './CommonHead';
const {width,height} = Dimensions.get('window');
export default  class UserHeader extends Component {

    // 头部左侧
    renderLeftItem() {
        return (
            <TouchableOpacity onPress={() => { alert(1) }} style={styles.navLeft}>
                {/*<Image source={require('../../assets/guide/scanning.png')} style={styles.navIcon} />*/}
                {/*<Text style={styles.navText}>扫一扫</Text>*/}
            </TouchableOpacity>
        )
    }
    // 头部中间
    renderTitleItem() {
        return (
            <TouchableOpacity onPress={() => { alert(1)  }}>
                <View style={styles.searchBox}>
                    {/*<Image source={require('../../assets/guide/search.png')} style={styles.searchIcon} />*/}
                    <Text style={styles.searchContent}>我</Text>
                </View>
            </TouchableOpacity>
        )
    }
    // 头部右侧
    renderRightItem() {
        return (
            <TouchableOpacity onPress={() => { alert(1)  }} style={styles.navRight}>
                {/*<Image source={require('../../assets/guide/remind.png')} style={styles.navIcon} />*/}
                {/*<Text style={styles.navText}>消息</Text>*/}
            </TouchableOpacity>
        )
    }
    render() {
        return (
                <CommonHead navBarColor={"#eaf1f3"}
                    leftItem={() => this.renderLeftItem()}
                    titleItem={() => this.renderTitleItem()}
                    rightItem={() => this.renderRightItem()}
                />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    navLeft: {
        alignItems: 'center',
        marginLeft: 10,
    },
    navRight: {
        alignItems: 'center',
        marginRight: 10,
    },
    navIcon: {
        height: 20,
        width: 20,
    },
    navText: {
        fontSize: 10,
    },
    searchBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        width: width * 0.7,
        backgroundColor: '#eaf1f3',
        borderRadius: 5,
        height: 30,
    },
    searchIcon: {
        width: 16,
        height: 16,
        marginRight: 6,
    },
    searchContent: {
        color: '#666',
        fontSize: 14,
    },
    tabBarUnderline: {
        backgroundColor: '#b4282d',
        height: 2,
        width:width/8,
        marginLeft:6
    }
});